<template>
  <div>
    <!-- 封装MyTag组件 -->
    <!-- input和text绑定vif和velse，双击时显示input -->
    <!-- 失去焦点时关闭input并更新数据 @blur-->
    <!-- vm绑定的是组件里的数据tag，修改完成后用close方法把tag数据传给父组件传过来的value -->
    <div class="my-tag" @dblclick="open">
      <input
        class="input"
        type="text"
        placeholder="输入标签"
        v-if="edit"
        v-focus
        @blur="close"
        v-model="tag"
        @keydown.enter="close"
      />
      <div class="text" v-else>{{ value }}</div>
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    // 自定义指令focus，插入页面时触发，自动获取焦点
    focus: {
      inserted(el) {
        // el 获取的dom元素
        el.focus()
      },
    },
  },
  methods: {
    //双击触发，改变edit ture
    open() {
      this.edit = true
      this.tag = this.value
    },
    // 失去焦点触发，关闭input edit false
    close() {
      this.edit = false
      // input把组件里的tag传回绑定的value里 vmodel语法糖
      this.$emit('input', this.tag)
    },
  },
  data() {
    return {
      edit: false,
      tag: '',
    }
  },
  // 接收的名字要是value
  props: ['value'],
}
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>